<template>
    <div class="pad20">
        <div class="filter-container">
            <!--查询的表单数据-->
            <el-form :inline="true" :model="map" size="mini">
                <el-form-item label="商家姓名:">
                    <el-input v-model.trim="map.realName"></el-input>
                </el-form-item>
                <el-form-item label="手机号：">
                    <el-input v-model.trim="map.phoneNumber"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button icon='el-icon-search' type="primary" @click="handleCheck">查询</el-button>
                    <el-button icon='el-icon-refresh' class="filter-item" @click="handleReset">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!--审核的弹框-->
        <el-dialog
                title="商家审核"
                :visible.sync="checkvisible"
                :before-close="closeCllback1"
                width="30%">
            <el-form ref="checkformDataRef" :model="checkformData" label-width="100px" :rules="rules">
                <el-form-item label="审核状态：" prop="state">
                    <el-radio-group v-model="checkformData.state" >
                        <el-radio label="1">通过</el-radio>
                        <el-radio label="2">不通过</el-radio>
<!--                        <el-radio label="0">待审核</el-radio>-->
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="备注：" prop="content">
                    <el-input type="textarea" :rows="3" placeholder="请填写理由" v-model="checkformData.content"></el-input>
                </el-form-item>
            </el-form>
            <el-row style="margin-top:17px; ">
                <el-button style="float:right;margin-left:6px;" size="mini" type="danger" plain @click="resetCheck">取 消</el-button>
                <el-button style="float:right" size="mini" type="primary" @click="submitCheckForm">确定</el-button>
            </el-row>
        </el-dialog>
        <!--数据表格-->
        <el-table  size="medium" :data="list" stripe border>
            <el-table-column type="index" label="序号" width="100" align="center">
            </el-table-column>
            <el-table-column label="用户编号" align="center" prop="userid">
            </el-table-column>
            <el-table-column prop="realname" label="商家姓名" align="center">
            </el-table-column>
            <el-table-column prop="tbUser.mobile" label="手机号" align="center">
            </el-table-column>
            <el-table-column
                    label="营业执照"
                    width="110">

                <template slot-scope="scope">
                    <el-image
                            style="width: 100px; height: 50px"
                            :src="scope.row.license"
                            :preview-src-list="srcList"
                            z-index="5000"
                            @click="setimglist(scope.row.license)">
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column
                    label="身份证正面"
                    width="110">
                <template slot-scope="scope">
                    <el-image
                            style="width: 100px; height: 50px"
                            :src="scope.row.cardfront"
                            :preview-src-list="srcList"
                            z-index="5000"
                            @click="setimglist(scope.row.cardfront)">
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column
                    label="身份证反面"
                    width="110">
                <template slot-scope="scope">
                    <el-image
                            style="width: 100px; height: 50px"
                            :src="scope.row.cardreverse"
                            :preview-src-list="srcList"
                            z-index="5000"
                            @click="setimglist(scope.row.cardreverse)">
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column prop="idcard" label="身份证号" align="center">
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button  type="primary" @click="handleCheckBusiness(scope.row)" size="mini">审核</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--分页-->
        <el-pagination
                background
                style="float: right;margin-top: 20px; margin-bottom: 22px"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-size="page.pageSize"
                :page-sizes="[5, 3, 10, 15, 20, 30]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.totalCount">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        name: "businessCheck",
        data() {
            return {
                radio:"1",
                checkvisible:false,
                map: {
                    realName:"",
                    phoneNumber:""
                    // currentPage:0,
                    // pageSize:0,
                },
                formData: {},
                checkformData:{

                },
                list: [],

                page: {
                    // beginPageIndex: 1,
                    // currentPage: 1,
                    // endPageIndex: 8,
                    pageCurrent: 1,
                    pageSize: 5,
                    totalCount: 0,
                    totalPage: 0
                },
                srcList: [''],
                rules: {
                    state: [
                        { required: true, message: '请选择审核状态', trigger: 'change' }
                    ],
                    content: [
                        { required: true, message: '请填写备注', trigger: 'blur' }
                    ],
                }
            }
        },
        created() {
            this.searchCheckBusiness()
        },
        methods: {
            // 商家分页列表接口
            searchCheckBusiness(){
                var that =this
                // this.map.pageCurrent = this.page.pageCurrent;
                // this.map.pageSize = this.page.pageSize;
                this.$http.post("/business/business/findUnreviewed?currentPage="+this.page.pageCurrent+"&pageSize="+this.page.pageSize,this.map).then(function (resp) {
                    if (resp.data.code===200){
                        that.list = resp.data.data.list
                        console.log(resp)
                        that.page.totalCount = resp.data.data.total
                    }
                })
            },
            //提交审核的表单
            submitCheckForm(){
                this.$refs['checkformDataRef'].validate((valid) => {
                    if (valid) {
                        var that = this
                        that.checkformData.gmtCreate=null;
                        this.$http.post("/business/checkBusiness/setBusinessState",this.checkformData).then(function (resp) {
                            if (resp.data.code===200){
                                that.$message.success(resp.data.msg);
                                that.checkvisible = false
                                that.searchCheckBusiness()
                            }
                        })
                    }else {
                        return false;
                    }
                })
            },
            //审核取消后清空
            resetCheck(){
                this.checkvisible = false
                this.checkformData.content = ""
                this.reload()
            },
            //查询
            handleCheck() {
                this.page.pageCurrent = 1
                this.searchCheckBusiness()
            },
            // 重置查询条件
            handleReset() {
                this.reload()
            },
            handleSizeChange(val) {
                this.page.pageSize = val
                this.searchCheckBusiness()
            },
            handleCurrentChange(val) {
                this.page.pageCurrent = val
                this.searchCheckBusiness()
            },
            // 刷新当前页面
            reload() {
                this.map = {}
                this.formData = {}
                this.searchCheckBusiness()
            },
            //关闭审核弹框回调
            closeCllback1(){
                this.checkvisible = false;
                this.$refs.checkformDataRef.resetFields();
                this.reload()
            },
            //审核弹框
            handleCheckBusiness(row){
                this.checkformData = row
                this.checkvisible = true
            },
            //往imglist里添加url
            setimglist(url){
                this.srcList[0]=url;
            }
        }
    }
</script>

<style scoped>

</style>
